require("../css/video.less")
require('../fonts/iconfont.css')

document.ready(function () {
    //节点
    let stop = document.querySelector('.stop')
    let play = document.querySelector('.play')
    let Url = 'http://139.9.177.51:8099'
    //视频内容
    //获取节点
    let video = document.querySelector('.video')
    let num = document.querySelector('.num')
    let text = document.querySelector('.text')
    let data = JSON.parse(localStorage.getItem('videoList'))
    //索引
    let sum = 0
    // 播放函数
    function playVideo() {
        video.src = Url + data[sum].videoUrl
        num.textContent = sum + 1 + "/" + data.length
        text.textContent = data[sum].title
    }
    playVideo()
    //自动连播
    video.addEventListener('ended', function () {
        sum++
        playVideo()
    })
    //上一个
    let prev = document.querySelector('.prev')
    prev.addEventListener('click', function () {
        if (sum > 0) {
            sum--
            playVideo()
        } else {
            utils.show(1, '已经到头了！')
        }

    })
    //下一个
    let next = document.querySelector('.next')
    next.addEventListener('click', function () {
        if (sum < data.length - 1) {
            sum++
            playVideo()
        } else {
            utils.show(1, '已经到头了！')
        }

    })
    console.log(data[sum].imgUrl);

    //暂停
    let stopVideo = document.querySelector('.stop')
    let mantle = document.querySelector('.mantle')
    let img = document.querySelector('img')
    let msg = document.querySelector('.msg')
    stopVideo.addEventListener('click', function () {
        video.pause()
        mantle.style.display = 'block'
        img.src = Url + data[sum].imgUrl
        msg.textContent = data[sum].title;
    })

    //播放
    let btn0 = document.querySelector('.btn0')
    btn0.addEventListener('click', function () {
        video.play()
        mantle.style.display = 'none'
    })

    //停止
    let btn1 = document.querySelector('.btn1')
    btn1.addEventListener('click', function () {
        location.href = "../page/sports.html"
    })

    //进度条
    let prog = document.querySelector('.prog')
    setInterval(function() {
        //进度=当前时间/总时间 
        let width = document.body.offsetWidth;
        //进度条宽度= 当前时间/视频总时间*盒子总宽度
        let num = width * (video.currentTime / video.duration);
        prog.style.width = num + 'px'

    }, 30)

















})